<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
<title th:utext="#{label.pages.home.title}">Title</title>
<script th:inline="javascript">
	function validate() {
        if (document.f.username.value == "" && document.f.password.value == "") {
            alert(/*[[#{message.username} + #{message.password}]]*/);
            document.f.username.focus();
            return false;
        }
        if (document.f.username.value == "") {
            alert(/*[[#{message.username}]]*/);
            document.f.username.focus();
            return false;
        }
        if (document.f.password.value == "") {
            alert(/*[[#{message.password}]]*/);
            document.f.password.focus();
            return false;
        }
    }
    
</script>
<style type="text/css">
.wrapper{width:500px;margin-left:auto;margin-right:auto}
label{padding-left:0 !important}
</style>
</head>
<body>
<div th:if="${message != null}" class="alert alert-info" th:utext="${message}">message</div>


<div th:if="${error != null}" class="alert alert-danger" th:utext="${session[SPRING_SECURITY_LAST_EXCEPTION]}">error</div>

    <div class="container">
        <div class="row wrapper">
            <h1 th:utext="#{label.form.loginTitle}">Header</h1>
             <a href="?lang=en" th:utext="#{label.form.loginEnglish}">login</a> |
             <a href="?lang=es_ES" th:utext="#{label.form.loginSpanish}">login</a>
            <br/><br/>
            
            <form name='f' action="login" method='POST' onsubmit="return validate();">
                 <span id="welcometext">&nbsp;</span>
                 
                 <br /><br />
                 <label class="col-sm-4" th:utext="#{label.form.loginEmail}">Email</label>
                 <span class="col-sm-8"><input class="form-control" type='text' name='username' value=''/></span>
                
                <br/><br/>        
                 <label class="col-sm-4" th:utext="#{label.form.loginPass}">password</label>
                 <span class="col-sm-8"><input class="form-control" type='password' name='password' /></span>
                
                <br/><br/>        
                 <label class="col-sm-4" th:utext="#{label.form.login2fa}">Google Authenticator Verification Code</label>
                 <span class="col-sm-8"><input class="form-control" type='text' name='code' /></span>
                
                <br/><br/>
                 <input class="btn btn-primary" name="submit" type="submit" th:value="#{label.form.submit}" />
 
            </form>
            <br/> Current Locale :  <span th:utext="${#locale}"></span><br/><br/>
             <a class="btn btn-default" th:href="@{/registration.html}" th:utext="#{label.form.loginSignUp}">signup</a>
             <br/>
             <a class="btn btn-default" th:href="@{/registrationCaptcha.html}" th:utext="#{label.form.loginSignUpCaptcha}">captcha signup</a>
             <br/><br/>
            <a class="btn btn-default" th:href="@{/registrationReCaptchaV3.html}" th:utext="#{label.form.loginSignUpReCaptchaV3}">recaptcha v3 signup</a>
             <br/><br/>
            <a class="btn btn-default" th:href="@{/forgetPassword.html}" th:utext="#{message.resetPassword}">reset</a>    
        </div>
    </div>
</body>

</html>